<template>
  <div id="gedan">
    <transition name="fade">
      <loading v-if="isLoading"></loading>
    </transition>
    <div class="hot">
      <h2>热门歌单</h2>
      <div class="content">
        <div class="item" v-for="(item, index) in newList" :key="index">
          <!-- <div class="run"></div> -->
          <div
            @click="playGD(item)"
            class="img"
            @mouseover="hotShow = index"
            @mouseleave="hotShow = false"
          >
            <img v-lazy="item.coverImgUrl" alt="" />
          </div>
          <div class="name" @click="playGD(item)">
            {{ item.name }}
          </div>
          <transition name="fade">
            <div class="byName" v-show="hotShow === index">
              <img class="byIcno" src="../../../assets/by.png" />
              <span>{{ item.creator.nickname }}</span>
            </div>
          </transition>
          <transition name="fade">
            <div class="count" v-show="hotShow === index">
              <span>{{ item.playCount }}</span>
              <img class="countIcno" src="../../../assets/playCount.png" />
            </div>
          </transition>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page="pages.current"
          :page-size="pages.size"
          layout="total, prev, pager, next"
          :total="pages.count"
        >
        </el-pagination>
      </div>
    </div>
    <div id="sort">
      <h2>分类歌单</h2>
      <div class="sort">
        <div class="all">
          <button @click="cateShow">
            <span v-show="quanbufenlei == false">全部分类</span>
            <span v-show="quanbufenlei == true">{{ categoryName }}</span>
          </button>
          <transition name="all-fade">
            <div class="sortCount" v-show="allShow == true">
              <div
                class="item"
                v-for="(item, index) in allSortList"
                :key="index"
              >
                <div class="category">
                  {{ item.categories }}
                </div>
                <div class="sub">
                  <span
                    v-for="(subItem, subIndex) in item.sub"
                    :key="subIndex"
                    @click="hotChoose(subItem)"
                    :style="{
                      color:
                        categoryName == subItem.name ? 'rgb(255, 165, 0)' : '',
                    }"
                  >
                    {{ subItem.name }}
                  </span>
                </div>
              </div>
            </div>
          </transition>
        </div>
        <div class="hotSort">
          <div
            class="item"
            v-for="(item, index) in hotSortList"
            :key="index"
            @click="hotChoose(item)"
            :style="{
              color: categoryName == item.name ? 'rgb(255, 165, 0)' : '',
            }"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
      <div class="content">
        <div
          class="item"
          v-for="(item, index) in allList"
          :key="index"
          @click="playGD(item)"
        >
          <div
            class="img"
            @mouseover="allSingleShow = index"
            @mouseleave="allSingleShow = false"
          >
            <img v-lazy="item.coverImgUrl" alt="" />
          </div>
          <div class="name">
            {{ item.name }}
          </div>
          <transition name="fade">
            <div class="byName" v-show="allSingleShow === index">
              <img class="byIcno" src="../../../assets/by.png" />
              <span>{{ item.creator.nickname }}</span>
            </div>
          </transition>
          <transition name="fade">
            <div class="count" v-show="allSingleShow === index">
              <img class="countIcno" src="../../../assets/playCount.png" />
              <span>{{ item.playCount }}</span>
            </div>
          </transition>
        </div>
      </div>
      <div class="pages">
        <el-pagination
          background
          @current-change="allCurrentChange"
          :current-page="allPages.current"
          :page-size="allPages.size"
          layout="total, prev, pager, next"
          :total="allPages.count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import loading from "../../../components/loading.vue";
export default {
  components: {
    loading,
  },
  data() {
    return {
      // 加载动画
      isLoading: true,
      // 分页数据
      pages: {
        count: 0,
        size: 20,
        current: 1,
      },
      // 全部歌单分页
      allPages: {
        count: 0,
        size: 20,
        current: 1,
      },
      // 当前页
      currentPage1: 1,
      // 最新歌单
      newList: [],
      // 热门歌单是否显示count和by
      hotShow: false,
      // 全部歌单
      allList: [],
      // 热门歌单分类
      hotSortList: [],
      // 全部分类
      allSortList: [],
      // 默认分类
      category: "全部分类",
      // 是否显示全部分类
      allShow: false,
      // 显示分类的名字
      categoryName: "华语",
      // 全部分类的歌单是否显示
      allSingleShow: false,
      // 显示全部分类还是某一个分类
      quanbufenlei: false,
    };
  },
  methods: {
    // 分页
    handleCurrentChange(val) {
      this.$axios({
        url: "/top/playlist",
        params: {
          limit: this.pages.size,
          order: "hot",
          offset: (val - 1) * this.pages.size,
        },
      }).then((res) => {
        this.newList = res.data.playlists;
      });
    },
    allCurrentChange(val) {
      this.$axios({
        url: "/top/playlist",
        params: {
          limit: this.allPages.size,
          offset: (val - 1) * this.allPages.size,
        },
      }).then((res) => {
        this.allList = res.data.playlists;
      });
    },
    // 是否显示全部分类
    cateShow() {
      this.allShow = !this.allShow;
    },
    // 热门分类是否被选择
    hotChoose(item) {
      this.quanbufenlei = true;
      this.categoryName = item.name;
      this.$axios({
        url: "/top/playlist",
        params: {
          limit: this.allPages.size,
          cat: this.categoryName,
        },
      }).then((res) => {
        this.allList = res.data.playlists;
        this.allPages.count = res.data.total;
      });
    },
    // 进入歌单详情
    playGD(item) {
      this.$router.replace({
        name: "gdDetail",
        query: {
          id: item.id,
        },
      });
    },
  },
  created() {
    // 热门歌单
    this.$axios({
      url: "/top/playlist",
      params: {
        limit: this.pages.size,
        order: "hot",
      },
    }).then((res) => {
      this.newList = res.data.playlists;
      this.pages.count = res.data.total;
      this.isLoading = false;
    });
    // 热门歌单分类
    this.$axios({
      url: "/playlist/hot",
    }).then((res) => {
      this.hotSortList = res.data.tags;
    });
    // 全部分类
    this.$axios({
      url: "/playlist/catlist",
      params: {
        limit: this.pages.size,
      },
    }).then((res) => {
      let list = [];
      for (let i = 0; i < 5; i++) {
        this.allSortList.push({
          num: i,
          categories: res.data.categories[i],
        });
        list = [];
        for (let j = 0; j < res.data.sub.length; j++) {
          if (res.data.sub[j].category == i) {
            list.push(res.data.sub[j]);
          }
        }
        this.allSortList[i].sub = list;
      }
    });
    // 默认显示华语歌单
    this.$axios({
      url: "/top/playlist",
      params: {
        limit: this.allPages.size,
        cat: this.categoryName,
      },
    }).then((res) => {
      this.allList = res.data.playlists;
      this.allPages.count = res.data.total;
    });
  },
};
</script>

<style scoped>
@import url("../../../css/gedan");
</style>